<template>
    <el-tag v-for="(tag, index) in store.state.tags" :key="tag.name" class="elTag" :type="tag.type"
        @click="clickTag(tag, index)" @close="closeTag(tag, index)" :closable="tag.name !== '首页'">
        {{ tag.name }}
    </el-tag>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'
const store = useStore()
console.log(store.state.tags)
const route = useRoute()
const router = useRouter()
const getTags = () => {
    // console.log(tags.value)
    const tagList = route.matched.filter(item => item.meta && item.meta.key)
    // console.log(tagList[0].meta.title)
    const index = store.state.tags.findIndex((item: any) => item.name === tagList[0].meta.title);
    if (index == -1) {
        store.commit('ADDTAGDATA', tagList)
        // store.state.tags.push({
        //     name: tagList[0].meta.title,
        //     type: '',
        //     key: tagList[0].meta.key
        // })
    }
}
watch(route, () => {
    getTags()
}, {
    immediate: true
})
const clickTag = (tag: any, index: number) => {
    console.log("点击 Tag 时触发的事件", tag)
    router.push(tag.key)
}
const closeTag = (tag: any, index: number) => {
    // console.log("关闭 Tag 时触发的事件", tag)
    store.state.tags.splice(index, 1)
    router.push(store.state.tags[store.state.tags.length - 1].key)
}
</script>

<style scoped></style>